<template>
	<view class="swrapper">
		<text class="toptop" style="font-size: 35rpx;">发起其他费用审批</text>
		<view class="top">
			<view class="text1">
				!验收登记说明：
			</view>
			<view class="text2">
				根据：本年度测算，本年度出差费用用为所有费用的10%，即公90923元
			</view>
		</view>
		<view class="kemu">
			<view class="left">
				经费科目：
			</view>
			<view class="right" style="color: #4F81E7;">
				其他费用
			</view>
		</view>
		<view class="img">
				<img src="@/static/bcgg1.jpg" alt="" style="width: 100%; height: 200rpx; margin-top: -20rpx;">
			<!-- <img src="/static/bcg.jpg" alt="" class="imgitem"> -->
		</view>
		<view class="alist">
			<view class="a1">
				经费使用情况（剩余）
			</view>
			<view class="a2">
				11820元
			</view>
			<view class="a3">
				项目第一季度团建活动
			</view>
			<view class="a4">
				年份：2022年
			</view>
			<view class="a5">
				查看明细
			</view>
		</view>
		<view class="table1">
			<u-form :model="form" border-bottom='false'>
				<u-form-item label="申请人:" border-bottom='false' :labelWidth='80'>
					<u-input v-model="form.a1" border='false' placeholder="请输入验收科目" type="select"/>
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
				<u-form-item label="申请部门:" border-bottom='false' :labelWidth='80'>
					<u-input v-model="form.a2" border='false' placeholder="请输入审批单号" type="select"/>
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
				<u-form-item label="申请事由:" border-bottom='false' :labelWidth='80'>
					<u-input v-model="form.a3" border='false' placeholder="请输入验收内容" type="select"/>
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
				<u-form-item label="申请金额:" border-bottom='false' :labelWidth='80'>
					<u-input v-model="form.a4" border='false' placeholder="请输入验收日期" type="select"/>
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
			</u-form>
		</view>
		<view class="qwe" style="margin: 20rpx 50rpx; font-size: 35rpx;">审批流程</view>
		<view class="end">
			<view class="enditem">
				<view class="left">
					1部门领导
				</view>
				<view class="right">
					朱小可
				</view>
			</view>
			<view class="enditem">
				<view class="left">
					2分管领导
				</view>
				<view class="right">
					朱小可
				</view>
			</view>
		</view>
		<view class="btn" >提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{a1:'',a2:'',a3:'',a4:'',a5:'',a6:'',a7:'',a8:'',a9:'',a10:'',a11:''},
				form2:{a1:'',a2:'',a3:'',a4:'',a5:''}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.fun{
		width: 20rpx;
		height: 20rpx;
		
	}
	
	.swrapper{
		background-color: rgb(244, 244, 244);
		padding: 20rpx 0rpx;
		// height: 1400rpx;
		.toptop{
			font-size: 38rpx;
			margin-left: 50rpx;
			margin-top: 30rpx;
		}
		.top{
			margin-top: 10rpx;
			width: 100%;
			background-color: #FDFFC6;
			color: #EBC74B;
			padding: 50rpx 50rpx;
			font-size: 30rpx;
			.text2{
				margin-top: 20rpx;
			}
		}
		.kemu{
			background-color: rgb(255, 255, 255);
			display: flex;
			justify-content: space-between;
			padding: 50rpx 30rpx;
		}
		.img{
				// background-color: blue;
				color: white;
				width: 100%;
				// padding: 10rpx 0rpx;
				position: relative;
		}
		.alist{
			color: white;
			.a1{
				font-size: 33rpx;
				position: absolute;
				left: 30rpx;
				top: 465rpx;
			}
			.a2{
				font-size: 33rpx;
				position: absolute;
				left: 580rpx;
				top: 465rpx;
			}
			.a3{
				font-size: 28rpx;
				position: absolute;
				left: 30rpx;
				top: 530rpx;
			}
			.a4{
				font-size: 28rpx;
				position: absolute;
				left: 30rpx;
				top: 580rpx;
			}
			.a5{
				border: 1px solid white;
				border-radius: 50rpx;
				padding: 10rpx;
				font-size: 28rpx;
				position: absolute;
				left: 580rpx;
				top: 530rpx;
			}
		}
		.table1{
			background-color: rgb(255, 255, 255);
			// background-color: red;
			padding: 0rpx 50rpx;
		}
		.table2{
			background-color: rgb(255, 255, 255);
			// background-color: red;
			padding: 0rpx 50rpx;
			.sss{
		
					margin-top: 100000rpx;
				
			}
			.tongxing{
				width: 150rpx;
				// height: 50rpx;
				border:1rpx solid blue;
				line-height: 50rpx;
				text-align: center;
				padding: 20rpx;
				border-radius: 30rpx;
				margin: 0rpx auto;
			}
		}
		.qwe{
			font-size: 38rpx;
			margin-left: 50rpx;
			margin-top: 30rpx;
		}
		.end{
			background-color: rgb(255, 255, 255);
			.enditem{
				line-height: 50rpx;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 50rpx;
				.right{
					padding: 10rpx;
					border: 1rpx blue solid;
					border-radius: 20rpx;
				}
			}
		}
		.btn{
			width: 700rpx;
			height: 100rpx;
			background-image: linear-gradient(to right, #548EEB, #446FE0);
			// background-color: blue;
			text-align: center;
			line-height: 100rpx;
			margin: 5rpx auto;
			font-size: 34rpx;
			color: white;
			border-radius: 50rpx;
		}
	}
</style>
